// COMPOSER TAB
// * {
//   background-color: gray;
// }

.composer {
  padding-left: 8px;
  padding-right: 8px;
}

.include-data-checkbox {
  background: #ffffff; // this is checkboxes in top right container
  /* neutral-300 */
  border: 1px solid lightgrey;
  box-sizing: border-box;
  border-radius: 2px;
  max-width: 26px;
  max-height: 26px;
  margin-left: 2px !important;
}

.switch:focus {
  border: none;
  outline: none;
}

.add-header-gRPC-cookie-button {
  color: $primary !important;
  border-color: $primary !important;
  width: 3px !important;
  height: 3px !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
  font-size: 16px !important;
  border-radius: 2px !important;
}

.add-header-or-cookie-button {
  color: $primary !important;
  border-color: $primary !important;
  min-width: 5px;
}

.prettify-select {
  // for application JSON body in REST requests
  float: right;
}

// grpc
.protocol-select-button {
  border: none !important;
  border-bottom: 1px solid $neutral-300 !important; // this is the dividing line underneath the protocol dropdown -Prince
}

.stream-title {
  font-size: 70%;
}

// needed for add new request button
.is-hack-height {
  height: 86.75%;
}

.add-request-button {
  border: 1px solid #3734a9 !important;
  &:hover {
    box-shadow: 1px 1px 1px 1px $neutral-300;
  }
}

.key {
  border: 1px solid $neutral-200 !important;
  border-radius: 4px;
}

.value {
  border: 1px solid $neutral-200 !important;
  border-radius: 4px;
}

// HISTORY TAB
.history-date {
  font-size: 120%;
}

.history-method {
  width: 130px;
}

.component {
  & :global(.react-codemirror2) {
    overflow: auto; /* you can use hidden here as well */
  }
}

.switch:focus {
  border: none;
  outline: none;
}

.add-request-button {
  border: 1px solid #3734a9 !important;
  position: absolute;
  &:hover {
    box-shadow: 1px 1px 1px 1px $neutral-300;
  }
}

.input {
  outline: none !important;
}

.history-date {
  font-size: 120%;
}

.history-method {
  width: 130px;
}

.stream-title {
  font-size: 70%;
}

.is-button-footer {
  min-height: 2.3rem !important;
  height: 2.3rem !important;
  margin-top: auto !important;
}

.is-tall-not-5rem {
  height: calc(100% - 5rem);
}

.tabs {
  margin-bottom: 0 !important;
}

.no-border-please {
  border: none !important;
}

.inputs {
  display: flex;
  justify-content: space-between;
}

.flex-space-around {
  display: flex;
  justify-content: space-around;
}

.container-margin {
  margin: 0 1rem 0 1rem;
}

